<template>


  <div class="common-layout">
    <el-container>
      <el-container>
        <el-header style="margin: 0;padding: 0;">
          <div style="position: relative;float: left;width: 175px;height: 50px">
            <img class="profile-avatar" alt="" src="@/assets/jiaozi-white.png" width="45px" height="45px"
                 style="margin-top: 10px"/>
            <div style="width: 125px;height: 50px;position: relative;float: right;margin-top: 15px">
              <el-text class="mx-1" size="large" tag="b" v-if="!collapsed" style="margin-top: 15px;color: #ffd04b;font-size: 25px;-webkit-user-select: none;user-select:none" type="warning">
                计量平台
              </el-text>
            </div>
          </div>


        </el-header>
      </el-container>
      <el-aside style="margin: 0;padding: 0;padding-top: 10px" width="24">
        <el-icon :size="24">
          <Expand v-if="collapsed"
                  class="trigger"
                  @click="() => (collapsed = !collapsed)"/>
          <Fold v-else class="trigger" @click="() => (collapsed = !collapsed)"/>
        </el-icon>
      </el-aside>
    </el-container>


  </div>

</template>
<script setup lang="ts">
let collapsed: any = defineModel('collapsed')
</script>

<style>

.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0px;
  cursor: pointer;
  transition: color 0.3s;
  color: #ffffff;
  margin-top: 4vh;
}

.trigger:hover {
  color: #ffd04b;
}
</style>